<template>
  <!-- 列表 -->
  <ContentWrap class="full-height">
    <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
      <template #operate="{ row }">
        <el-button type="primary" size="small" @click="openForm('update', row.id)" v-hasPermi="['base:notify-message:update']" plain>编辑</el-button>
        <el-button type="danger" size="small" @click="handleDelete(row.id)" v-hasPermi="['base:notify-message:delete']" plain>删除</el-button>
      </template>
    </vxe-grid>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <NotifyMessageForm ref="formRef" @success="getList"/>

  <!-- 搜索抽屉 -->
  <SearchDrawer ref="searchRef" v-model="queryParams" @search="getList" />

</template>

<script setup lang="ts">
import download from '@/utils/download'
import { NotifyMessageApi, NotifyMessageVO } from '@/api/base/notifymessage'
import NotifyMessageForm from './NotifyMessageForm.vue'
import type { VxeGridProps, VxeGridListeners,VxeGridInstance  } from 'vxe-table'
import SearchDrawer from './SearchDrawer.vue'

defineOptions({ name: 'NotifyMessage' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const queryParams = reactive({
    pageNo: 1,
  pageSize: 10,
  userId: undefined,
  userType: undefined,
  templateId: undefined,
  templateCode: undefined,
  templateNickname: undefined,
  templateContent: undefined,
  templateType: undefined,
  templateParams: undefined,
  readStatus: undefined,
  readTime: [],
  createTime: []
})

const searchRef = ref()
// 表格实例
const gridRef = ref<VxeGridInstance>()

// 调用vxe grid query方法重载表格
const getList = () => {
  if (gridRef.value) {
    gridRef.value.commitProxy('query') // 触发表格重新加载数据
  }
}
// 获取表格数据
const fetchApi = () => {
  return new Promise(async (resolve) => {
    const res = await NotifyMessageApi.getNotifyMessagePage(queryParams)
    gridOptions.data = res.list
    resolve({
      page: {
        total: res.total
      },
      result: res.list
    })
  })
}

const gridOptions = reactive<VxeGridProps<NotifyMessageVO>>({
  stripe: true,
  border: true,
  keepSource: true,
  height: '100%',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 10
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  toolbarConfig: {
    import: false,
    export: false,
    print: false,
    zoom: true,
    custom: true,
    // slots: {
    //   buttons: 'toolbar_buttons'
    // },
    tools: [
      { name: '', code: 'search', icon: 'vxe-icon-search', status: 'info' }
    ]
  },
  proxyConfig: {
    props: {
      result: 'result',
      total: 'page.total'
    },
    ajax: {
      // 接收 Promise
      query: ({ page }) => {
        queryParams.pageNo = page.currentPage
        queryParams.pageSize = page.pageSize
        return fetchApi()
      }
    }
  },
  columns: [
    { type: 'checkbox', width: 50 },
    { type: 'seq', width: 70 },
    { field: 'userType', title: '用户类型', minWidth: '100px' },
    { field: 'templateId', title: '模版编号', minWidth: '100px' },
    { field: 'templateCode', title: '模板编码', minWidth: '100px' },
    { field: 'templateNickname', title: '模版发送人名称', minWidth: '100px' },
    { field: 'templateContent', title: '模版内容', minWidth: '100px' },
    { field: 'templateType', title: '模版类型', minWidth: '100px' },
    { field: 'templateParams', title: '模版参数', minWidth: '100px' },
    { field: 'readStatus', title: '是否已读', minWidth: '100px' },
    { field: 'readTime', title: '阅读时间', minWidth: '100px' },
    { field: 'createTime', title: '创建时间', minWidth: '100px' },
    { title: '操作', width: 200, slots: { default: 'operate' } }
  ],
  data: []
})

const gridEvents: VxeGridListeners = {
  toolbarButtonClick(params) {
    console.log(params.code)
  },

  toolbarToolClick({ code }) {
    // console.log(123, code, tool)
    switch (code) {
      case 'search':
        handelSearch()
        break
    }
  }
}

const handelSearch = () => {
  searchRef.value?.open()
}
</script>
